<template>
    <div class="editIndex">
        <el-dialog :before-close="close" title="修改" :visible.sync="show">
            <el-form :model="mainInfo">
                <el-form-item label="文档标题：">
                    <el-input size="small" class="input_class" v-model="mainInfo.title" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="文档说明：">
                    <el-input size="small" class="input_class" v-model="mainInfo.remark" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item v-for="(item,index) in mainInfo.requestHost" :key="index" label="">
                    环境名 ： <el-input size="small" :disabled="item.name == 'mock'?true:false" v-model="item.name" class="input_class"></el-input> 请求地址 ： <el-input :disabled="item.name == 'mock'?true:false" size="small" class="input_class" v-model="item.host"></el-input>
                    <el-button class="margin_left" type="success" @click="add" size="small">新增</el-button>
                    <el-button class="margin_left" v-if="mainInfo.requestHost.length > 1 && item.name != 'mock'" type="danger" @click="deleteData(index)" size="small">删除</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="sendEdit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { requestData } from '@/api'
export default {
    name: 'editIndex',
    data(){
        return{
            editShow:false,//修改主页面信息
            mainInfo:{}
        }
    },
    props: {
        /**
         *  @show    展示弹窗
         */
        show: {
            type: Boolean
        },
        // mainInfo:{
        //     type:Object
        // }
    },
    components: {

    },
    created () {
      
    },
    mounted: function() {
        // this.editShow = this.show
    },
    computed:{

    },
    methods:{
        async sendEdit(){ //确认修改
            await requestData(2,'/updateInfo',{json:JSON.stringify(this.mainInfo)})
            this.$emit('edit',1)
        },
        close(){
            this.$emit('edit')
        },
        add(){
            this.mainInfo.requestHost.push({})
        },
        deleteData(index){
            this.mainInfo.requestHost.splice(index,1)
        }
        
    }
}
</script>
<style lang="scss" scope>
.editIndex{
    .input_class{
        width:200px;
    }
}
</style>